{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import google_play_button with context %}
{% from "macros-protocol.html" import split with context %}

{% extends "firefox/base/base-protocol.html" %}

{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}
{% set show_send_to_device = LANG in settings.SEND_TO_DEVICE_LOCALES %}
{% set android_url = play_store_url('firefox', 'firefox-browsers-mobile-android') %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('firefox-browsers-mobile') }}

  {% if show_firefox_app_store_banner %}
    {{ css_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}

{# Issue 13019: Avoid duplicate content for English pages. #}
{%- block page_title_full -%}
  {%- if LANG == 'en-US' -%}
    Get Firefox for Android — Mozilla (US)
  {%- elif LANG == 'en-GB' -%}
    Download Firefox for Android — Mozilla (UK)
  {%- else -%}
    {{ ftl('mobile-android-firefox-browser-android') }} - Mozilla
  {%- endif -%}
{%- endblock -%}

{% block page_desc %}{{ ftl('mobile-android-firefox-browser-for') }}{% endblock %}

{% block body_class %}{{ super() }} mobile-android{% endblock %}

{% block page_banner %}
  {% if show_firefox_app_store_banner %}
    {% include 'includes/banners/mobile/firefox-app-store.html' %}
  {% endif %}
{% endblock %}

{% block site_header %}
  {% with hide_nav_download_button=True %}
    {% include 'includes/protocol/navigation/navigation.html' %}
  {% endwith %}
{% endblock %}

{% block sub_navigation %}
  {% include 'firefox/includes/sub-nav-firefox.html' %}
{% endblock %}

{% block content %}
<main>
  {% call split(
    block_class='mzp-l-split-center-on-sm-md c-page-header',
    media_class='mzp-l-split-h-center',
    media_include='firefox/browsers/mobile/includes/s2d-android.html',
    media_after=True
  ) %}
    <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox">{{ ftl('firefox-ios-firefox-browser') }}</div>
    <h1 class="mzp-u-title-lg">{{ ftl('mobile-android-short-cut-the-internet') }}</h1>
    <p class="c-tagline">{{ ftl('mobile-android-see-all-your-open-tabs') }}</p>
    <p class="c-cta">
      {{ google_play_button(href=android_url, id='playStoreLink-primary') }}
    </p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/fast-and-private.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-android-fast-and-private') }}</h3>
    <p>{{ ftl('mobile-android-firefox-for-android') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/one-tap-to-private-mode.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl',
  ) %}
    <h3>{{ ftl('mobile-android-one-tap-to') }}</h3>
    <p>{{ ftl('mobile-android-get-to-private') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/search-your-own-way.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-android-search-your-own') }}</h3>
    <p>{{ ftl('mobile-android-got-a-big') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/save-power-with-dark-mode.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl',
  ) %}
    <h3>{{ ftl('mobile-android-save-power-with') }}</h3>
    <p>{{ ftl('mobile-android-switch-to-dark') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/easily-organize-your-tabs.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-android-own-your-home', fallback='mobile-android-easily-organize-your') }}</h3>
    <p>{{ ftl('mobile-android-get-to-the-parts', fallback='mobile-android-got-lots-of') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/supercharge-firefox-with-add-ons.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl',
  ) %}
    <h3>{{ ftl('mobile-android-supercharge-firefox-with') }}</h3>
    <p>{{ ftl('mobile-android-addons-are-like') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/pick-up-where-you-left-off.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-android-pick-up-where') }}</h3>
    <p>{{ ftl('mobile-android-go-from-your') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/search-from-your-phones-home-screen.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl',
  ) %}
    <h3>{{ ftl('mobile-android-search-from-your') }}</h3>
    <p>{{ ftl('mobile-android-no-need-to') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/android/pin-videos-to-your-screen.svg', optional_attributes={ 'class': 'mzp-c-split-media-asset' }),
    block_class='mzp-l-split-reversed mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-background-secondary'
  ) %}
    <h3>{{ ftl('mobile-android-pin-videos-to') }}</h3>
    <p>{{ ftl('mobile-android-pop-videos-out') }}</p>
  {% endcall %}

  {% call split(
    image=resp_img('img/firefox/browsers/mobile/about-hero-800.png',
    srcset={
      'img/firefox/browsers/mobile/about-hero-500.png': '500w',
      'img/firefox/browsers/mobile/about-hero-800.png': '800w',
      'img/firefox/browsers/mobile/about-hero-1100.png': '1100w'
    },
    sizes={
      '(min-width: 768px)': '760px',
      'default': '250px'
    },
    optional_attributes={
      'class': 'mzp-c-split-media-asset',
      'height': '664',
      'width': '760'
    }),
    block_class='about-mozilla mzp-l-split-center-on-sm-md mzp-t-content-xl mzp-t-split-nospace',
    theme_class='mzp-t-dark',
    media_class='mzp-l-split-media-overflow mzp-l-split-h-center',
    media_after=True
  ) %}
    <h3>{{ ftl('mobile-android-about-mozilla') }}</h3>
    <p>{{ ftl('mobile-android-mozilla-exists-to-v2', 'mobile-android-mozilla-exists-to') }}</p>
  {% endcall %}

</main>
{% endblock %}

{% block js %}
  {{ js_bundle('firefox-browsers-mobile') }}

  {% if show_firefox_app_store_banner %}
    {{ js_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}
